/*
 * @Author: Await
 * @Date: 2025-05-06 17:35:35
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 17:35:35
 * @Description: 主题时间轴配置组件
 */
import React from 'react';
import {
  Row,
  Col,
  Typography,
  ColorPicker,
  Divider,
  InputNumber,
  Select,
  Card,
  Tooltip,
  Switch,
} from 'antd';
import { InfoCircleOutlined } from '@ant-design/icons';
import type { ThemeConfig } from '../../../types/chartTypes';

const { Title, Text } = Typography;
const { Option } = Select;

interface TimelineConfigProps {
  value: ThemeConfig;
  onChange: (newValue: any) => void;
}

/**
 * 主题时间轴配置组件
 * 配置时间轴的样式
 */
const TimelineConfig: React.FC<TimelineConfigProps> = ({ value, onChange }) => {
  // 初始化时间轴配置
  const timelineConfig = value.timeline || {
    axisType: 'category',
    lineStyle: {
      color: '#ddd',
      width: 1,
    },
    itemStyle: {
      color: '#A4B1D7',
      borderWidth: 1,
    },
    controlStyle: {
      color: '#A4B1D7',
      borderColor: '#A4B1D7',
    },
    checkpointStyle: {
      color: '#316BF3',
      borderColor: '#fff',
    },
    label: {
      color: '#293441',
    },
    emphasis: {
      itemStyle: {
        color: '#316BF3',
      },
      controlStyle: {
        color: '#316BF3',
        borderColor: '#316BF3',
      },
      label: {
        color: '#293441',
      },
    },
  };

  // 更新线条样式
  const updateLineStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        lineStyle: {
          ...timelineConfig.lineStyle,
          [key]: val,
        },
      },
    });
  };

  // 更新项目样式
  const updateItemStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        itemStyle: {
          ...timelineConfig.itemStyle,
          [key]: val,
        },
      },
    });
  };

  // 更新控制样式
  const updateControlStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        controlStyle: {
          ...timelineConfig.controlStyle,
          [key]: val,
        },
      },
    });
  };

  // 更新检查点样式
  const updateCheckpointStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        checkpointStyle: {
          ...timelineConfig.checkpointStyle,
          [key]: val,
        },
      },
    });
  };

  // 更新标签样式
  const updateLabelStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        label: {
          ...timelineConfig.label,
          [key]: val,
        },
      },
    });
  };

  // 更新高亮项目样式
  const updateEmphasisItemStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        emphasis: {
          ...timelineConfig.emphasis,
          itemStyle: {
            ...timelineConfig.emphasis.itemStyle,
            [key]: val,
          },
        },
      },
    });
  };

  // 更新高亮控制样式
  const updateEmphasisControlStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        emphasis: {
          ...timelineConfig.emphasis,
          controlStyle: {
            ...timelineConfig.emphasis.controlStyle,
            [key]: val,
          },
        },
      },
    });
  };

  // 更新高亮标签样式
  const updateEmphasisLabelStyle = (key: string, val: any) => {
    onChange({
      ...value,
      timeline: {
        ...timelineConfig,
        emphasis: {
          ...timelineConfig.emphasis,
          label: {
            ...timelineConfig.emphasis.label,
            [key]: val,
          },
        },
      },
    });
  };

  return (
    <div className="theme-timeline-config">
      <Card title="时间轴轨道样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Text>轨道颜色</Text>
            <div>
              <ColorPicker
                value={timelineConfig.lineStyle?.color || '#ddd'}
                onChange={(color) => updateLineStyle('color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>轨道宽度</Text>
            <InputNumber
              value={timelineConfig.lineStyle?.width || 1}
              onChange={(val) => updateLineStyle('width', val)}
              min={0}
              max={10}
              style={{ width: '100%' }}
            />
          </Col>
          <Col span={8}>
            <Text>轨道样式</Text>
            <Select
              value={timelineConfig.lineStyle?.type || 'solid'}
              onChange={(val) => updateLineStyle('type', val)}
              style={{ width: '100%' }}
            >
              <Option value="solid">实线</Option>
              <Option value="dashed">虚线</Option>
              <Option value="dotted">点线</Option>
            </Select>
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '16px 0' }} />

      <Card title="时间轴点样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Title level={5}>普通点</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.itemStyle?.color || '#A4B1D7'}
                    onChange={(color) => updateItemStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框宽度</Text>
                <InputNumber
                  value={timelineConfig.itemStyle?.borderWidth || 1}
                  onChange={(val) => updateItemStyle('borderWidth', val)}
                  min={0}
                  max={5}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={12}>
                <Text>边框颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.itemStyle?.borderColor || '#fff'}
                    onChange={(color) => updateItemStyle('borderColor', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>点大小</Text>
                <InputNumber
                  value={timelineConfig.itemStyle?.symbolSize || 10}
                  onChange={(val) => updateItemStyle('symbolSize', val)}
                  min={1}
                  max={20}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>

          <Col span={12}>
            <Title level={5}>高亮点</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.emphasis?.itemStyle?.color || '#316BF3'}
                    onChange={(color) => updateEmphasisItemStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框宽度</Text>
                <InputNumber
                  value={timelineConfig.emphasis?.itemStyle?.borderWidth || 1}
                  onChange={(val) => updateEmphasisItemStyle('borderWidth', val)}
                  min={0}
                  max={5}
                  style={{ width: '100%' }}
                />
              </Col>
              <Col span={12}>
                <Text>边框颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.emphasis?.itemStyle?.borderColor || '#fff'}
                    onChange={(color) => updateEmphasisItemStyle('borderColor', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>点大小</Text>
                <InputNumber
                  value={timelineConfig.emphasis?.itemStyle?.symbolSize || 10}
                  onChange={(val) => updateEmphasisItemStyle('symbolSize', val)}
                  min={1}
                  max={20}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '16px 0' }} />

      <Card title="时间轴检查点样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={8}>
            <Text>颜色</Text>
            <div>
              <ColorPicker
                value={timelineConfig.checkpointStyle?.color || '#316BF3'}
                onChange={(color) => updateCheckpointStyle('color', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>边框颜色</Text>
            <div>
              <ColorPicker
                value={timelineConfig.checkpointStyle?.borderColor || '#fff'}
                onChange={(color) => updateCheckpointStyle('borderColor', color.toHexString())}
                showText
              />
            </div>
          </Col>
          <Col span={8}>
            <Text>边框宽度</Text>
            <InputNumber
              value={timelineConfig.checkpointStyle?.borderWidth || 2}
              onChange={(val) => updateCheckpointStyle('borderWidth', val)}
              min={0}
              max={5}
              style={{ width: '100%' }}
            />
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '16px 0' }} />

      <Card title="时间轴控制按钮样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Title level={5}>普通状态</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.controlStyle?.color || '#A4B1D7'}
                    onChange={(color) => updateControlStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.controlStyle?.borderColor || '#A4B1D7'}
                    onChange={(color) => updateControlStyle('borderColor', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框宽度</Text>
                <InputNumber
                  value={timelineConfig.controlStyle?.borderWidth || 1}
                  onChange={(val) => updateControlStyle('borderWidth', val)}
                  min={0}
                  max={5}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>

          <Col span={12}>
            <Title level={5}>高亮状态</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.emphasis?.controlStyle?.color || '#316BF3'}
                    onChange={(color) => updateEmphasisControlStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.emphasis?.controlStyle?.borderColor || '#316BF3'}
                    onChange={(color) => updateEmphasisControlStyle('borderColor', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>边框宽度</Text>
                <InputNumber
                  value={timelineConfig.emphasis?.controlStyle?.borderWidth || 1}
                  onChange={(val) => updateEmphasisControlStyle('borderWidth', val)}
                  min={0}
                  max={5}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>

      <Divider style={{ margin: '16px 0' }} />

      <Card title="时间轴标签样式" bordered={false}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Title level={5}>普通状态</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.label?.color || '#293441'}
                    onChange={(color) => updateLabelStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>字体大小</Text>
                <InputNumber
                  value={timelineConfig.label?.fontSize || 12}
                  onChange={(val) => updateLabelStyle('fontSize', val)}
                  min={8}
                  max={20}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>

          <Col span={12}>
            <Title level={5}>高亮状态</Title>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Text>颜色</Text>
                <div>
                  <ColorPicker
                    value={timelineConfig.emphasis?.label?.color || '#293441'}
                    onChange={(color) => updateEmphasisLabelStyle('color', color.toHexString())}
                    showText
                  />
                </div>
              </Col>
              <Col span={12}>
                <Text>字体大小</Text>
                <InputNumber
                  value={timelineConfig.emphasis?.label?.fontSize || 12}
                  onChange={(val) => updateEmphasisLabelStyle('fontSize', val)}
                  min={8}
                  max={20}
                  style={{ width: '100%' }}
                />
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default TimelineConfig;